import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RankingHeaderWrapper } from './style'
import { useAppSelector } from '@/store'
interface IProps {
  children?: ReactNode
}

const RankingHeader: React.FC<IProps> = () => {
    const { playList } = useAppSelector(state => ({
        playList: state.ranking.playlist
    }))
  return (
    <RankingHeaderWrapper>
      <div className="left">
        <h3 className="title">歌曲列表</h3>
        <div className="count">{playList.trackCount}首歌</div>
      </div>
      <div className="right">
        <span>播放：</span>
        <span className="count">{playList.playCount}</span>
        <span>次</span>
      </div>
    </RankingHeaderWrapper>
  )
}

export default memo(RankingHeader)
